<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理 - 教务管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background-color: #4285f4;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .nav-title {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .nav-menu a:hover, .nav-menu a.active {
            background-color: rgba(255,255,255,0.2);
        }
        
        .nav-user {
            color: #e3f2fd;
        }
        
        /* 主要内容区域 */
        .main-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        
        .page-header {
            background: rgba(255,255,255,0.95);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }
        
        .page-title {
            font-size: 28px;
            color: #333;
            margin-bottom: 10px;
        }
        
        .page-desc {
            color: #666;
            font-size: 16px;
        }
        
        /* 操作区域 */
        .action-bar {
            background: rgba(255,255,255,0.95);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .search-input {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            width: 200px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #4285f4, #34a853);
            color: white;
            box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        /* 数据表格 */
        .data-container {
            background: rgba(255,255,255,0.95);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .table-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        
        .table-container {
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
        
        tr:hover {
            background-color: #f5f5f5;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: #999;
        }
        
        /* 分页 */
        .pagination {
            padding: 20px;
            text-align: center;
            border-top: 1px solid #eee;
        }
        
        .pagination button {
            margin: 0 5px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            border-radius: 4px;
        }
        
        .pagination button:hover {
            background: #f0f0f0;
        }
        
        .pagination button.active {
            background: #4285f4;
            color: white;
            border-color: #4285f4;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-menu {
                gap: 15px;
            }
            
            .action-bar {
                flex-direction: column;
                align-items: stretch;
            }
            
            .search-input {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-title">教务管理系统</div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="student.html" class="active">学生管理</a></li>
                <li><a href="attendance.html">考勤管理</a></li>
                <li><a href="user.html">用户管理</a></li>
            </ul>
            <div class="nav-user">admin ▼</div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">学生管理</h1>
            <p class="page-desc">管理学生基本信息，包括学号、姓名、班级、联系方式等</p>
        </div>

        <!-- 操作栏 -->
        <div class="action-bar">
            <input type="text" id="searchInput" class="search-input" placeholder="搜索学生姓名...">
            <button class="btn btn-primary" onclick="searchStudents()">搜索</button>
            <button class="btn btn-secondary" onclick="loadStudents()">刷新</button>
            <button class="btn btn-primary" onclick="addStudent()">添加学生</button>
        </div>

        <!-- 数据表格 -->
        <div class="data-container">
            <div class="table-header">学生列表</div>
            <div class="table-container">
                <div id="loadingDiv" class="loading">正在加载数据...</div>
                <table id="studentTable" style="display: none;">
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>班级</th>
                            <th>联系电话</th>
                            <th>邮箱</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="studentTableBody">
                    </tbody>
                </table>
                <div id="noDataDiv" class="no-data" style="display: none;">暂无数据</div>
            </div>
            <div class="pagination" id="pagination" style="display: none;">
                <!-- 分页按钮将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <script>
        const API_BASE = '/api';
        let currentPage = 1;
        let pageSize = 10;
        let totalPages = 1;
        
        // 页面加载时获取学生数据
        document.addEventListener('DOMContentLoaded', function() {
            loadStudents();
        });
        
        // 加载学生数据
        async function loadStudents(page = 1) {
            currentPage = page;
            showLoading();
            
            try {
                const response = await fetch(`${API_BASE}/students?current=${page}&size=${pageSize}`);
                const result = await response.json();
                
                if (result.success && result.data) {
                    displayStudents(result.data.records || []);
                    updatePagination(result.data.current, result.data.pages, result.data.total);
                } else {
                    showNoData();
                }
            } catch (error) {
                console.error('加载学生数据失败:', error);
                showNoData();
            }
        }
        
        // 搜索学生
        async function searchStudents() {
            const searchTerm = document.getElementById('searchInput').value.trim();
            showLoading();
            
            try {
                let url = `${API_BASE}/students?current=1&size=${pageSize}`;
                if (searchTerm) {
                    url += `&name=${encodeURIComponent(searchTerm)}`;
                }
                
                const response = await fetch(url);
                const result = await response.json();
                
                if (result.success && result.data) {
                    displayStudents(result.data.records || []);
                    updatePagination(result.data.current, result.data.pages, result.data.total);
                } else {
                    showNoData();
                }
            } catch (error) {
                console.error('搜索学生失败:', error);
                showNoData();
            }
        }
        
        // 显示学生数据
        function displayStudents(students) {
            const tbody = document.getElementById('studentTableBody');
            tbody.innerHTML = '';
            
            if (students.length === 0) {
                showNoData();
                return;
            }
            
            students.forEach(student => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${student.studentNo || '-'}</td>
                    <td>${student.name || '-'}</td>
                    <td>${student.gender || '-'}</td>
                    <td>${student.className || '-'}</td>
                    <td>${student.phone || '-'}</td>
                    <td>${student.email || '-'}</td>
                    <td>
                        <button class="btn btn-primary" style="padding: 5px 10px; margin-right: 5px;" onclick="editStudent(${student.id})">编辑</button>
                        <button class="btn btn-secondary" style="padding: 5px 10px;" onclick="deleteStudent(${student.id})">删除</button>
                    </td>
                `;
                tbody.appendChild(row);
            });
            
            showTable();
        }
        
        // 更新分页
        function updatePagination(current, pages, total) {
            const pagination = document.getElementById('pagination');
            if (pages <= 1) {
                pagination.style.display = 'none';
                return;
            }
            
            pagination.style.display = 'block';
            pagination.innerHTML = `
                <button onclick="loadStudents(1)" ${current === 1 ? 'disabled' : ''}>首页</button>
                <button onclick="loadStudents(${current - 1})" ${current === 1 ? 'disabled' : ''}>上一页</button>
                <span>第 ${current} 页，共 ${pages} 页，总计 ${total} 条记录</span>
                <button onclick="loadStudents(${current + 1})" ${current === pages ? 'disabled' : ''}>下一页</button>
                <button onclick="loadStudents(${pages})" ${current === pages ? 'disabled' : ''}>末页</button>
            `;
        }
        
        // 显示加载状态
        function showLoading() {
            document.getElementById('loadingDiv').style.display = 'block';
            document.getElementById('studentTable').style.display = 'none';
            document.getElementById('noDataDiv').style.display = 'none';
            document.getElementById('pagination').style.display = 'none';
        }
        
        // 显示表格
        function showTable() {
            document.getElementById('loadingDiv').style.display = 'none';
            document.getElementById('studentTable').style.display = 'table';
            document.getElementById('noDataDiv').style.display = 'none';
        }
        
        // 显示无数据
        function showNoData() {
            document.getElementById('loadingDiv').style.display = 'none';
            document.getElementById('studentTable').style.display = 'none';
            document.getElementById('noDataDiv').style.display = 'block';
            document.getElementById('pagination').style.display = 'none';
        }
        
        // 添加学生
        function addStudent() {
            alert('添加学生功能开发中...');
        }
        
        // 编辑学生
        function editStudent(id) {
            alert(`编辑学生功能开发中... 学生ID: ${id}`);
        }
        
        // 删除学生
        function deleteStudent(id) {
            if (confirm('确定要删除这个学生吗？')) {
                alert(`删除学生功能开发中... 学生ID: ${id}`);
            }
        }
        
        // 回车搜索
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchStudents();
            }
        });
    </script>
</body>
</html>
